<template>
  <view class="container">
    <view class="tabs">
      <view :class="{'active': activeTab === 'commonMedicine'}" @click="switchTab('commonMedicine')">常用药品</view>
      <view :class="{'active': activeTab === 'commonPrescription'}" @click="switchTab('commonPrescription')">常用处方</view>
      <view :class="{'active': activeTab === 'historyPrescription'}" @click="switchTab('historyPrescription')">历史处方</view>
    </view>

    <view class="content">
      <block v-if="activeTab === 'commonMedicine'">
        <text class="title">常用药品列表</text>
        <view class="item" v-for="(medicine, index) in medicines" :key="medicine.middleId">
          <view class="item-left">
<!--            <a href="http://localhost:9090/#/pages/medicine/pdetails/index">-->
<!--              -->
<!--            </a>-->
            <button class="delete-button" @click="uptoMedicine(medicine.middleId)">
              <img :src="medicine.restorativesImg" style="height: 80px; width: 80px;">
            </button>
            <text class="restorativesName">{{ medicine.restorativesName }}</text>
            <text class="restorativesManufacturer">{{ medicine.restorativesManufacturer }}</text>
            <text class="restorativesSpecification">{{ medicine.restorativesSpecification }}</text>
            <text class="restorativesPrice">¥ {{ medicine.restorativesPrice }}</text>
          </view>
          <button class="delete-button" @click="removeMedicine(index)">删除</button>
        </view>
        <button class="add-button" @click="addMedicine(medicine.middleId)">+ 新增常用药品</button>
      </block>

      <block v-if="activeTab === 'commonPrescription'">
        <view v-for="(prescription, index) in prescriptions" :key="index" class="prescription-item">
          <view class="prescription-header">
            <text class="prescription-label">R</text>
            <text>临床诊断：{{ prescription.diagnosis }}</text>
          </view>
          <view class="prescription-medicines">
            <text v-for="(medicine, medicineIndex) in prescription.medicines" :key="medicineIndex">
              {{ medicine.name }} {{ medicine.quantity }}
            </text>
          </view>
          <view class="prescription-actions">
            <!-- <button @click="deletePrescription(index)">删除</button> -->
            <!-- <button @click="editPrescription(index)">编辑处方</button> -->
          </view>
        </view>
        <button class="add-prescription" @click="addPrescription">+ 新增常用处方</button>
      </block>

      <block v-if="activeTab === 'historyPrescription'">
        <view v-for="(prescription, index) in historyPrescriptions" :key="index" class="prescription-item">
          <view class="prescription-header">
            <text class="prescription-label">R</text>
            <text>{{ prescription.patientName }} {{ prescription.patientAge }}岁</text>
          </view>
          <view class="prescription-diagnosis">
            <text>临床诊断：{{ prescription.diagnosis }}</text>
          </view>
          <view class="prescription-medicines">
            <text v-for="(medicine, medicineIndex) in prescription.medicines" :key="medicineIndex">
              {{ medicine.name }} {{ medicine.quantity }}
            </text>
          </view>
          <view class="prescription-actions">
            <button @click="setCommonPrescription(index)">设为常用处方</button>
            <button @click="continuePrescription(index)">续处方</button>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
import {getPharmacy, PharmacyList} from "@/api/medicine/pharmacy";

export default {
  data() {
    return {
      activeTab: 'commonMedicine',
      medicines: [],
      middleId: '',

      // activeTab: 'commonPrescription',
      prescriptions: [
        {
          diagnosis: '感冒',
          medicines: [
            { name: '板蓝根颗粒', quantity: '10包/盒 *1盒' },
            { name: '板蓝根颗粒', quantity: '10包/盒 *1盒' },
            { name: '板蓝根颗粒', quantity: '10包/盒 *1盒' },
            // 可以添加更多药品信息
          ]
        },
        // 可以添加更多处方信息
      ],

      historyPrescriptions: [
        {
          patientName: '吴珊珊',
          patientAge: 23,
          diagnosis: '感冒',
          medicines: [
            { name: '板蓝根颗粒', quantity: '10包/盒 *1盒' },
            // 可以添加更多药品信息
          ]
        },
      ],
    };
  },
  created() {
    this.PareList();
  },
  methods: {
    uptoMedicine(middleId){
      this.$router.push('/pages/medicine/pdetails/index');
    },
    setCommonPrescription(index) {
      // 将历史处方设为常用处方的逻辑
      console.log('设为常用处方', index);
      // 这里可以添加将历史处方添加到常用处方列表的逻辑
    },
    continuePrescription(index) {
      // 续处方的逻辑
      console.log('续处方', index);
      // 这里可以添加续处方的逻辑
    },
    switchTab(tab) {
      this.activeTab = tab;
    },
    removeMedicine(index) {
      this.medicines.splice(index, 1);
    },
    editPrescription(index) {
      // 编辑处方的逻辑
      console.log('编辑处方', index);
    },
    addPrescription() {
      // 新增处方的逻辑

    },
    PareList() {
      PharmacyList().then(
          res => {
            console.log(res);
            this.medicines = res.data;
            this.middleId=res.data.middleId
          }
      );
    },
    addMedicine(middleId) {
      // Add new medicine logic here
      // this.$router.push('/pages/medicine/inpharmcy/index?'+middleId);
    }
  }
};
</script>

<style>
.container {
  padding: 10px;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  padding: 10px 0;
}

.tab {
  font-size: 16px;
  color: #007bff;
}

.content {
  margin-top: 10px;
  background-color: #fff;
  padding: 10px;
  border-radius: 8px;
}

.title {
  font-size: 18px;
  margin-bottom: 10px;
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.item-left {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.name {
  font-size: 16px;
  font-weight: bold;
  margin-top: 5px;
}

.company {
  font-size: 14px;
  color: #666;
  margin-top: 2px;
}

.price {
  font-size: 16px;
  color: #ff5722;
  margin-top: 5px;
}

.delete-button {
  background-color: #f8f8f8;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 14px;
  color: #007bff;
  margin-left: 10px;
}

.no-more {
  margin-top: 10px;
  font-size: 14px;
  color: #999;
  text-align: center;
}

.add-button {
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  text-align: center;
  border-radius: 8px;
}
</style>
